{% extends 'social_base.html' %}
{% load static %}
{% block title %}
{{ username }}的点赞
{% endblock %}
{% block head %}
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }
</style>
{% endblock %}

{% block body %}
<div class="profile-container">
    <h1>{{ username }}收到的点赞</h1>

    <p>我的朋友给我点了 {{ user_profile.total_likes }}赞，他们非常喜欢我</p>

    <ul>
        {% for like in likes_page %}
        <li>
            {{ like.sender.nickname }} 点赞于 {{ like.created_at }}
            <a
                href="{% url 'huizan' user_name=user_profile.user.username friend_name=like.sender.user.username %}">回赞</a>
        </li>
        {% endfor %}
    </ul>

    <!-- 显示分页导航 -->
    <div class="pagination">
        <span class="step-links">
            {% if likes_page.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ likes_page.previous_page_number }}">previous</a>
            {% endif %}

            <span class="current">
                Page {{ likes_page.number }} of {{ likes_page.paginator.num_pages }}.
            </span>

            {% if likes_page.has_next %}
            <a href="?page={{ likes_page.next_page_number }}">next</a>
            <a href="?page={{ likes_page.paginator.num_pages }}">last &raquo;</a>
            {% endif %}
        </span>
    </div>
</div>
{% endblock %}